@use '../tp';

.#{tp.$prefix}-lblv {
	align-items: center;
	display: flex;
	line-height: 1.3;
	padding-left: tp.cssVar('container-h-padding');
	padding-right: tp.cssVar('container-h-padding');

	&#{&}-nol {
		display: block;
	}

	&_l {
		color: tp.cssVar('label-fg');
		flex: 1;
		hyphens: auto;
		overflow: hidden;
		padding-left: 4px;
		padding-right: 16px;
	}
	&.#{tp.$disabled} &_l {
		opacity: 0.5;
	}
	&#{&}-nol &_l {
		display: none;
	}
	&_v {
		align-self: flex-start;
		flex-grow: 0;
		flex-shrink: 0;
		width: tp.cssVar('blade-value-width');
	}
	&#{&}-nol &_v {
		width: 100%;
	}
}
